
<template>
<!-- 美团对账正常单    美团对账异常单 -->
    <div class="storeInfo">
        <div class="head">
            <el-form class="headForm">
                <el-form-item label="">
                    <el-input v-model="form.order_id" placeholder="订单号"></el-input>
                </el-form-item>
                
                <el-form-item label="">
                    <el-select clearable v-model="form.pay_from" placeholder="支付方式">
                        <el-option v-for="item in payforlist" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.order_status" placeholder="订单状态">
                        <el-option v-for="item in orderStatus" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.order_type" placeholder="订单类型">
                        <el-option v-for="item in orderType" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>



                

                <el-button type="danger" @click="search" >搜索</el-button> 
                <el-button type="danger" @click="relativebillFn" >关联订单</el-button> 
                <!-- <el-button class="btnTxt">结算金额合计:121231545元</el-button>  -->
                
            </el-form>
        </div> 
        <!-- table -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 																						 -->
                <el-table-column prop="order_id" label="订单号" width="200" fixed> </el-table-column>
                <el-table-column prop="pay_from_cn" label="支付方式"></el-table-column>
                <el-table-column prop="order_price" label="金额" width="230"></el-table-column>
                <el-table-column prop="total_price" label="实付" width="230"></el-table-column>

                <el-table-column prop="order_status_cn" label="订单状态" width="240"></el-table-column>
                <el-table-column prop="order_type_cn" label="订单类型"></el-table-column>

                <el-table-column prop="platform_cn" label="来源"></el-table-column>               
                
                <el-table-column prop="pay_time" label="消费时间" width="230"></el-table-column>

                <el-table-column prop="source_cn" label="异常来源"></el-table-column>
                <el-table-column prop="status_cn" label="处理状态"></el-table-column>
                <el-table-column prop="" label="操作" width="200">
                    <template slot-scope="scope">
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i v-if="scope.row.status != 1 && item.url == 'edit'">{{item.name}}</i>
                            <i  v-if="item.url != 'edit'">{{item.name}}</i>
                            <i v-if="scope.row.status != 1 && item.url == 'edit'">&nbsp;|&nbsp;</i>
                            <i v-else-if="indexLimit != limitList.length-1 && item.url != 'edit'">&nbsp;|&nbsp;</i>
                        </span>
                    </template>                             
                </el-table-column>


            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <!-- 详情弹框 -->
        <orderDetail :detailShow="detailShow" :detailData="detailData"></orderDetail>
        <!-- 关联订单弹框 -->
        <el-dialog title="关联订单" :visible.sync="relativebill" class="business">
            <el-form ref="form"  label-width="80px">
                <el-form-item label="订单号">
                    <el-input v-model="editOrderid"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="relativebill = false">取 消</el-button>
                <el-button type="primary" @click="confrim">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑弹框，在status!=1时编辑的按钮才会显示 -->
        <el-dialog title="编辑" :visible.sync="editshow" class="business">
            <el-form :model="editForm" >
                <el-form-item label="订单状态"  :label-width="editW">
                    <el-select clearable v-model="editForm.order_status" placeholder="订单状态">
                        <el-option  label="已送达" value="3"></el-option>
                        <el-option  label="已取消" value="-1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="实付金额"  :label-width="editW">
                    <el-input v-model="editForm.total_price" aria-placeholder="实付金额"></el-input>
                </el-form-item>
                <el-form-item label="备注"  :label-width="editW">
                    <el-input type="textarea" v-model="editForm.remarks" aria-placeholder="备注"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editshow = false">取 消</el-button>
                <el-button type="primary" @click="editCom">确 定</el-button>
            </div>
        </el-dialog>

    </div>
  
</template>
<style lang="scss" scoped>
.chartBox{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    height:450px;
    margin-top:20px;
    padding:0 5px;
    margin-bottom:8px;
    .chartItem{
        margin:0 5px;
        background:#fff;
        position: relative;
        width: 25%;
        border-radius: 5px;
        .arrow{
            width: 0;
            height: 0;
            border-right: 12px solid transparent;
            border-left: 12px solid transparent;
            border-bottom: 8px solid #fff;
            position: absolute;
            top: -8px;
            left: 50%;
            margin-left: -12px;
        }
        .chartItemCanvas{
            width:100%;
            height:450px;
        }
    }
}
.iDataW{
    padding:0 10px;
    margin-top:5px;
    .ulHead{
        display: flex;
        flex-direction:row;
        justify-content:space-between;
        height:48px;
        background:#fff;   
        font-size:14px;
        padding:5px 8px;
        border-radius:3px; 
        color:#7e8c8d;    
        .li{
            width:25%;
            flex:1;
            text-align: center;
            .bigFont{
                font-size:26px;
                text-align: left;
                font-weight:900;
                color:#000;
                margin-top:5px;
            } 
            .symbol{
                font-size:30px;
                font-weight: 900;
                color:#000;
                width:20px;
                float:right;
                margin-top:-6px;
            }
        }
        

    }  
}
</style>
<style>
.setWidth{width:140px !important}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
import orderDetail from '../../pop/orderDetailOprate.vue';
export default {
   components:{
        orderDetail
    },
    data () {
    return {
        orderStatus:[
            {status:'0',status_cn:"待支付"},
            {status:'1',status_cn:"已支付未接单"},
            {status:'2',status_cn:"已接单未送达"},
            {status:'3',status_cn:"已送达"},
            {status:'-1',status_cn:"系统取消"},
            {status:'-2',status_cn:"申请退款"},
            {status:'-3',status_cn:"退款驳回"},
            {status:'-4',status_cn:"退款中"},
            {status:'-5',status_cn:"已退款"},
        ],//业务类型
        orderType:[
            {status:'1',status_cn:"预定开房"},
            {status:'2',status_cn:"前台开房"},
            {status:'3',status_cn:"一般消费"},
            {status:'4',status_cn:"换房"},
            {status:'5',status_cn:"补时"},
            {status:'6',status_cn:"打赏"},
            {status:'7',status_cn:"VIP充值赠送酒水"}
        ],//交易类型
        payforlist:[
            {status:'2',status_cn:"微信支付"},
            {status:'1',status_cn:"支付宝支付"},
            {status:'3',status_cn:"POS支付"},
            {status:'4',status_cn:"美团券支付"},
            {status:'5',status_cn:"备用金支付"},
            {status:'6',status_cn:"VIP卡支付"},
            {status:'7',status_cn:"0元下单"},
            {status:'8',status_cn:"优惠券"},
            {status:'9',status_cn:"口碑券支付"},
            {status:'10',status_cn:"ALIPAY"},
            {status:'11',status_cn:"WECHATPAY"},
            {status:'12',status_cn:"门店卡支付"},
        ],// 支付类型
        form:{
            page:1,
            size:20,
        },
        tableData:[],
        total:50,
        size:20,
        pageNum:1,
        limitList:[
            {url:"see",name:"查看"},
            {url:"edit",name:"编辑"},
            {url:"cancle",name:"取消关联"},
        ],
        detailShow:false,
        detailData:{
            fee_items:{
                items_detail:[],
                time_detail:[]

            }
        },
        relativebill:false,//控制关联订单的弹框；
        editOrderid:"",//关联订单时的order_id
        editshow:false,//编辑弹框的显示
        editForm:{
            // order_status:'',
            // total_price:"",
            // remarks:""
        },//编辑的参数
        editW:"120px",//label的宽度
        getOrderId:'',//编辑时需要order_id
 
    }
  }, 
   mounted(){
        let that = this;
        that.getList();
  },
  methods:{
    search(){
        let that = this;
        //搜索有问题，搜索2019-03数据和2019-04数据是一样的；-error
        that.getList()
    },
    changePage(val){
        var that = this;
        that.pageNum = val;
        that.form.page = val;
        that.getList()
    },
    theClick(u,a){
        let that = this;
        if(u == 'see'){
            abc.get(that,potUrl.orderv2info,{order_id:a.order_id,order_type:a.order_type},(res)=>{
                that.detailShow = true;
                that.detailData = res.data
            })
        }else if(u == 'edit'){
            that.editshow = true;
            that.getOrderId = a.order_id;
        }else{
            //
            abc.post(that,potUrl.ordererrorcancle,{order_id:a.order_id},(res)=>{
                that.getList()
            })
        }
    },
    editCom(){
        let that = this;
        that.editForm.order_id = that.getOrderId;
        abc.post(that,potUrl.ordererroredit,that.editForm,(res)=>{
            that.getList()
        })
    },
    relativebillFn(){
        let that = this;
        that.relativebill = true;
    },
    confrim(){
        let that = this;
        abc.post(that,potUrl.ordererrorrelation,{order_id:that.editOrderid},(res)=>{
            that.relativebill = false
        })
    },
    getList(){
        let that = this;
        abc.get(that,potUrl.ordererrorlist,that.form,(res)=>{
            that.tableData=res.data.list;
            that.total = res.data.total;
        })//列表
    }
  }
}
</script>
